<template>
    <div class="global-content" :class="contentClasses">
      <!-- 🎯 路由视图容器 -->
      <router-view v-slot="{ Component, route }">
        <!-- 🎬 页面切换动画 -->
        <transition 
          :name="transitionName" 
          mode="out-in"
          @after-leave="resetScroll"
        >
          <!-- 💾 路由缓存管理 比如：用户从列表页进入详情页，再回到列表页时，列表页的滚动位置、筛选条件等状态都会保持 -->
          <keep-alive :include="cacheRoutes" :exclude="excludeCacheRoutes">
            <component 
              :is="Component" 
              :key="getRouteKey(route)"
              :class="{ 'content-padding': showPadding }"
            />
          </keep-alive>
        </transition>
      </router-view>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useLayoutManage } from '@/layouts/layoutManage.js'
  
  // 🎯 Props 接收
  const props = defineProps({
    showPadding: { //控制是否显示内边距  true: 普通页面，需要内边距  false: 特殊页面（如登录页），不需要内边距
      type: Boolean,
      default: true
    }
  })
  
  // 🎯 使用布局管理
  const {
    layoutSetting,
    actualLayoutMode,
    layoutClasses
  } = useLayoutManage()
  
  // 🎯 计算属性
  const contentClasses = computed(() => [
    'content-container',
    `content-${actualLayoutMode.value}`,
    {
      'content-no-padding': !props.showPadding,
      'content-animation': layoutSetting.enableAnimation
    }
  ])
  
  // 🎬 动画名称（根据布局设置）
  const transitionName = computed(() => {
    return layoutSetting.enableAnimation ? 'page-fade' : ''
  })
  
  // 💾 缓存路由 (暂时为空，后续可扩展)
  const cacheRoutes = computed(() => [])
  const excludeCacheRoutes = computed(() => [])
  
  // 🎯 路由key生成（用于强制刷新组件）
  function getRouteKey(route) {
    return route.fullPath
  }
  
  // 📜 重置滚动位置
  function resetScroll() {
    const el = document.querySelector('.global-content')
    if (el) {
      el.scrollTo({ left: 0, top: 0 })
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .global-content {
    flex: 1;
    overflow: auto;
    background: var(--el-bg-color-page);
    
    // 🎯 默认内边距
    .content-padding {
      padding: 20px;
      
      @media (max-width: 768px) {
        padding: 16px;  // 移动端减少内边距
      }
    }
    
    // 🎯 不同布局模式的样式
    &.content-vertical {
      // 垂直布局特定样式
    }
    
    &.content-horizontal {
      // 水平布局特定样式
    }
    
    // 🎬 页面切换动画
    &.content-animation {
      .page-fade-enter-active,
      .page-fade-leave-active {
        transition: opacity 0.3s ease;
      }
      
      .page-fade-enter-from,
      .page-fade-leave-to {
        opacity: 0;
      }
    }
    
    // 🎯 滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: var(--el-border-color-dark);
      border-radius: 3px;
    }
  }
  </style>